/* 
    应用中心,应用管理,根据镜像仓库创建应用
 */
<template>
    <div class="app-container">
        <el-row class="wrapper warehouse">
            <el-col :span="24" class="warp-main el-bar">
              <p style="margin-bottom:10px;">
                  <i class="iconfont icon-users"></i>镜像仓库
              </p>
              <!-- 左边的步骤条.start -->
              <el-col :span="4" style="padding-left:4%;margin-top:30px;">
              <el-steps direction="vertical" :active="2">
                <el-step title="部署方式" icon="el-icon-load"></el-step>
                <el-step title="选择镜像" icon="el-icon-load"></el-step>
                <el-step title="创建应用" icon="el-icon-load01"></el-step>
              </el-steps>
              </el-col>
              <!-- 左边的步骤条.end -->
              <!-- 表单 -->
              <el-col :span="20" style="border-left:1px solid #eaeaea;padding:0 20px;margin-top:30px;">
                  <image-base :pageAction="pageAction" :targetImageName="targetImageName" ></image-base>
              </el-col>             
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { appManagement } from "@/utils/appManagement";
import imageBase from "@/components/appCenter/appManage/imageBase";

export default {
  components: { imageBase },
  data() {
    return {
        pageAction: this.projectConfig.APP_MANAGE_PLUGIN_ATCION_DEPLOY_IMAGE,
        //pageAction: this.projectConfig.APP_MANAGE_PLUGIN_ATCION_SET_IMAGE,
        //targetImageName: 'nipdev/fs/netty'
        //targetImageName: 'nipdev/fs/server'
        //targetImageName: 'nipdev/tomcat' 
        targetImageName: '',
        // backOffUrl: '/apply/management/app_create',
        // forwardUrl: '/apply/management/app_page',
    };
  },
  methods: {}
};
</script>
<style>
.warehouse .el-step__head {
  margin-bottom: 60px;
}
.warehouse .el-form-item{
  margin-bottom:6px !important;
}
.warehouse .el-upload-dragger {
  width: 64px;
  height: 64px;
}
.warehouse .house-bd .el-form-item__content {
  border-radius: 4px;
}
.warehouse .step {
  width: 100%;
  text-align: right;
  padding-top: 10px;
}

.warehouse .el-step__title {
  font-size: 16px;
}
.warehouse .el-upload-dragger .el-icon-upload {
  font-size: 42px;
  color: #97a8be;
  margin: 4px;
}

.warehouse .el-upload-list .el-upload-list__item {
  width: 180px;
  margin-right: 40px;
  margin-top: 10px;
}
.warehouse .el-step__icon {
  font-size: 22px;
}

.warehouse .el-step__icon .el-icon-load01 {
  width: 30px;
  height: 30px;
  background: url(../../../assets/images/Cloud-down-no.png);
  background-size: 30px 30px;
}
.warehouse .el-step__icon .el-icon-load {
  width: 30px;
  height: 30px;
  background: url(../../../assets/images/Cloud-down.png);
  background-size: 30px 30px;
}
.warehouse .el-step__line.is-vertical {
  top: 30px;
}
.warehouse .mirror {
  position: absolute;
  left: 37%;
  bottom: 6px;
}

.warehouse .line {
  margin-top: 13px;
  float: left;
  width: 3px;
  height: 17px;
  margin-right: 10px;
  border-left: 3px solid #00a1ea;
}
.warehouse .Title {
  font-size: 15px;
}
.warehouse .el-tabs__active-bar {
  background: none;
}
.warehouse .el-tabs__header {
  border-bottom: none;
  margin: 0;
}

.warehouse .el-select {
  border-radius: 4px;
}
.warehouse .addkeys {
  margin: 10px 0 0 0px;
}
.warehouse .unit {
  margin-left: 4px;
  font-size: 15px;
  color: #999;
}
.warehouse .el-icon-plus {
  color: #fff;
}
.warehouse .BtnR {
  text-align: center;
  margin-top: 20px;
}

.warehouse .el-step.is-vertical .el-step__line {
  width: 1px;
  top: 0;
  bottom: -60px;
  left: 16px;
}
.warehouse .el-input-number {
  line-height: 28px;
}

.warehouse .el-table td,
.warehouse .el-table th {
  padding: 4px !important;
}
.warehouse .el-tabs__nav-wrap::after {
  background: none;
  height: 0;
}


.warehouse .el-input-number.is-controls-right .el-input-number__decrease{
   line-height: 14px;
}
.warehouse ol, .warehouse ul{
  display:flex;
  margin:0;
  padding:0;
}
.warehouse ol li{
   list-style: none;
  width:33.33%;
  color: #878d99;
  font-weight:bold;
  text-align: center;
  padding: 0 36px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6ebf5;
  font-size: 14px
}
.warehouse .config li{
  width:25%;
}
.warehouse ul li{
  list-style: none;
  width:33.33%;
  text-align:center;
}
.warehouse ul li .unit{
  position: absolute;
  margin-left: 8px;
}
.warehouse .manageForm li{
  width:25%;
}
.warehouse ul li .el-form-item{
  padding:6px 36px;
  border-bottom: 1px solid #e6ebf5;
}

.warehouse .liPort .el-input.is-disabled .el-input__inner{
  height: 30px !important;
}
.warehouse .liPort  .el-input--suffix .el-input__inner{
  height: 30px !important;
}
.warehouse .el-radio-button__inner{
    padding:8px 14px;
}
</style>
 